import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import AppleItem from './appleItem';

@inject('apple')
@observer
class AppleBasket extends Component {
  getAppleList () {
    const { apples, eatApple } = this.props.apple;
    let notEatenApples = apples.filter(apple => !apple.isEaten)
    if (!notEatenApples.length) {
      return [<div className="empty-tip" key="empty">苹果篮子空空如也</div>]
    }
    return notEatenApples.map(apple => (
      <AppleItem apple={apple} eatApple={() => eatApple(apple.id)} key={apple.id}/>
    ))
  }
  render() {
    const {
      buttonText,
      curAppleCount,
      curAppleWeight,
      eatenAppleCount,
      eatenAppleWeight,
      isPicking,
      pickApple
    } = this.props.apple;
    return (
      <div className="appleBusket">
        <div className="title">苹果篮子</div>

        <div className="stats">
          <div className="section">
            <div className="head">当前</div>
            <div className="content">
              {curAppleCount}个苹果，{curAppleWeight}克
            </div>
          </div>
          <div className="section">
            <div className="head">已吃掉</div>
            <div className="content">
              {eatenAppleCount}个苹果，{eatenAppleWeight}克
            </div>
          </div>
        </div>

        <div className="appleList">
          {this.getAppleList()}
        </div>

        <div className="btn-div">
          <button
            className={isPicking ? 'disabled' : ''}
            onClick={() => pickApple()}
          >
            {buttonText}
          </button>
        </div>
      </div>
    )
  }
}

export default AppleBasket;